<template>
  <view class="table-container">
    <TableGroup v-for="(item, index) in groupList" :key="index" :data="item" />
    <FooterButton @click.native="createImg">生成桌码</FooterButton>
    <!-- <Footer /> -->
    <InputDialog ref="InputDialog" title="区域名" @submit="addGroupSubmit" />
    <DrawTableCode ref="drawTableCode" :data="groupList" @finish="canDraw=true" />
  </view>
</template>

<script>
import TableGroup from "./components/TableGroup.vue";
import Footer from "./components/Footer.vue";
import FooterButton from "@/components/public/Button/FooterButton.vue";
import InputDialog from "@/components/public/Dialog/InputDialog.vue";
import DrawTableCode from "@/components/public/DrawTableCode/index.vue";
import { mapActions, mapState } from "vuex";
export default {
  components: {
    Footer,
    TableGroup,
    FooterButton,
    InputDialog,
    DrawTableCode
  },
  data() {
    return {
      canDraw: true
    };
  },
  computed: {
    ...mapState({
      groupList: state => state.table.groupList
    })
  },
  onLoad() {
    this.init();
  },
  onNavigationBarButtonTap(data) {
    this.handleClickAddGroup();
  },
  methods: {
    ...mapActions({
      getTableGroups: "getTableGroups",
      postTableGroups: "postTableGroups"
    }),
    init() {
      this.getTableGroups();
    },
    handleClickAddGroup() {
      this.$refs.InputDialog.open();
    },
    addGroupSubmit(value) {
      uni.showLoading();
      let params = {
        name: value
      };
      this.postTableGroups(params).finally(res => {
        uni.hideLoading();
      });
    },
    createImg() {
      this.canDraw = false;
      this.$nextTick(() => {
        this.$refs.drawTableCode.draw(this.groupList);
      });
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: $uni-bg-color-grey;
}
.table-container {
  padding: 30rpx;
  padding-bottom: 100rpx;
}
</style>
